<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 300px;height: 40px;line-height: 40px;margin: 0 auto;text-indent: 4px;}
        .box span{display: block;width: 300px;height: 40px;border: solid 1px black;cursor: pointer}
        .box ul{margin: 0;padding: 0;list-style: none;border: solid 1px black;border-top:none;width: 300px;text-indent: 8px;display: none;}
        .box ul li.hover{background: #66f;color: #fff}
    </style>
</head>
<body>
    <select name="" id="">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="杭州">杭州</option>
    </select>

    <div class="box">
        <span></span>
        <ul class="list">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
            <li>杭州</li>
        </ul>
    </div>
</body>
<script>
    var ospan = document.querySelector(".box span");
    var oul = document.querySelector(".list");
    var ali = oul.children;

    // 记录下拉菜单的显示状态：0表示要显示，1表示要隐藏
    var flag=0;

    // 默认选中的索引
    var index = 0;

    // 设置默认项
    setDefault()


    for(var i=0;i<ali.length;i++){
        // 提前给每个li添加索引
        ali[i].xuhao = i;
        // 鼠标进入，显示样式
        ali[i].onmouseover = function(){
            this.className = "hover"
        }
        // 鼠标离开，隐藏样式
        ali[i].onmouseout = function(){
            this.className = "";
        }
        // 点击
        ali[i].onclick = function(){
            // console.log(this.xuhao);
            // 先取消默认选中
            ali[index].lastElementChild.remove();
            // 修改默认索引，为点击的元素的索引
            index = this.xuhao;

            // 修改默认项
            setDefault()

            // 隐藏下拉菜单
            oul.style.display = "none";
            // 同时更新下拉菜单的状态
            flag = 0;
        }
    }




    function setDefault(){
        // 根据索引，设置要显示的内容
        ospan.innerHTML = ali[index].innerHTML;
        // 及选中的状态
        var em = document.createElement("em")
        em.innerHTML = "√";
        ali[index].appendChild(em);
    }




    ospan.onclick = function(){
        // 判断状态，决定下拉菜单的显示或隐藏，同时更新状态
        if(flag === 0){
            oul.style.display = "block";
            flag = 1;
        }else{
            oul.style.display = "none";
            flag = 0;
        }
    }

</script>
</html>